<template>
	<view class="tjshop" v-if="showList">
		<view class="title">
			<text>用户评价({{pjlist.length}})</text>
		</view>

		<view class="pjBox">
			<view class="pjItem" v-for="(item, index) in pjlist" :key="item">
				<view class="pjUser">
					<image :src="item.portrait"></image>
					<view class="usermsg">
						<view class="left">
							<view class="name">{{item.name}}</view>
							<view class="comment-wrapper">
								<text class="pj__txt">评分</text>
								<view class="xj">
									<view class="xjbox">
										<text :class="[`iconfontPT star ${ item1 < item.score ? 'iconshoucang-yixuanzhong' : 'iconshoucang-weixuanzhong' }`]"
										 v-for="item1 in 5" :key="item1"></text>
									</view>
								</view>
							</view>
						</view>
						<view class="right">
							{{item.time}}
						</view>
					</view>

					<view class="pjinfo">
						<view class="msg">
							{{item.content}}
						</view>
						<view class="imgBox">
							<view class="imgItem imgBox__singleImage" v-if="item.img.length === 1">
								<image :src="`${qiniuhost}${item.img[0]}-t.m75xx`" mode="aspectFill" @click="$imgPreview(item.img[0], idx, qiniuhost, item.img)"></image>
							</view>
							<view class="imgItem imgBox__multImage" v-else-if="item.img.length > 1" v-for="(i,idx) in item.img" :key="idx">
								<image :src="`${qiniuhost}${i}-t.m75xx`" mode="aspectFill" @click="$imgPreview(i, idx, qiniuhost, item.img)"></image>
							</view>
						</view>
					</view>

					<view class="business-comment" v-if="item.hf_status === 1">
						<text class="business-comment__icon iconfontPT iconshangjiahuiying"></text>
						<text class="business-comment__txt"><text class="business-comment__txt--reply">商家回复:</text>{{item.hf_content}}</text>
					</view>
				</view>
			</view>
			<noData v-if="!pjlist.length" texts="暂无评级"/>
		</view>
	</view>
</template>

<script>
	import {
		getallpj
	} from "../../apis/shop/api.js"
	export default {
		data() {
			return {
				pjlist: [],
				showList:false,
				store_id: ""
			}
		},
		computed: {
			host() {
				return this.$baseHost.car
			},
			qiniuhost() {
				return this.$baseHost.qiniuHost
			}
		},
		onLoad(option) {
			this.store_id = option.store_id;
			uni.showLoading({
				title: '加载中...',
				mark: true,
			});
			this.getdata();
		},
		methods: {
			getdata() {
				let that = this;
				getallpj({
					store_id: that.store_id
				}).then(res => {
					that.pjlist = res.data;
					clearTimeout(that.timeout);
					that.timeout = setTimeout(() => {
						that.showList=true;
						uni.hideLoading();
					}, 200)
				})
			}
		}
	}
</script>

<style lang="less">
	.tjshop {
		.title {
			padding: 20rpx 40rpx;
			border-bottom: 1px solid #eee;
		}
		
		.pjBox {
			.iconshoucang-yixuanzhong {
				color: #FCD100;
			}

			padding: 40rpx;

			.pjItem {
				.pjUser {
					margin-bottom: 30rpx;

					&::after {
						content: "";
						display: block;
						height: 0;
						overflow: hidden;
						clear: both;
					}

					&>image {
						width: 70rpx;
						height: 70rpx;
						border-radius: 35rpx;
						float: left;
					}

					.usermsg {
						padding-left: 20rpx;
						width: calc(~"100% - 90rpx");
						float: left;

						.comment-wrapper {
							margin-top: 14rpx;
						}

						&::after {
							content: "";
							display: block;
							height: 0;
							overflow: hidden;
							clear: both;
						}

						.left {
							float: left;
							width: calc(~"100% - 160rpx");

							&::after {
								content: "";
								display: block;
								height: 0;
								overflow: hidden;
								clear: both;
							}

							.name {
								font-size: 26rpx;
								color: #333333;
							}

							&>view {
								&::after {
									content: "";
									display: block;
									height: 0;
									overflow: hidden;
									clear: both;
								}

								.pj__txt {
									font-size: 24rpx;
									float: left;
									color: #999;
								}
							}

						}

						.right {
							float: right;
							font-size: 24rpx;
							color: #999999;
						}
					}

					.pjinfo {
						padding-left: 84rpx;

						.msg {
							font-size: 28rpx;
							color: #333333;
							font-size: 500;
						}

						.imgBox {
							display: flex;
							margin-top: 20rpx;

							&__singleImage {
								width: 340rpx;
								height: 360rpx;

								>image {
									width: 100%;
									height: 100%;
								}
							}

							&__multImage {
								width: 194rpx;
								height: 194rpx;

								margin-right: 10rpx;

								&:last-child {
									margin-right: 0;
								}

								>image {
									width: 100%;
									height: 100%;
								}
							}
						}
					}
				}


			}

			.business-comment {
				border-top: 1px solid rgba(204, 204, 204, 0.5);
				padding: 10rpx 0 30rpx;
				margin-left: 84rpx;
				margin-top: 30rpx;
				font-size: 26rpx;


				&__icon {
					color: #FAAB20;
					margin-right: 20rpx;
					font-size: 25rpx;
				}

				&__txt {
					color: #333;
					font-size: 26rpx;

					&--reply {
						color: #999;
						margin-right: 10rpx;
					}
				}
			}

			.xj {
				margin-bottom: 10px;
				width: 100%;

				&::after {
					content: "";
					display: block;
					height: 0;
					overflow: hidden;
					clear: both;
				}

				.xjbox {
					float: left;
					margin-left: 15rpx;
					display: flex;
					position: relative;
					top: 4rpx;

					&::after {
						content: "";
						display: block;
						height: 0;
						overflow: hidden;
						clear: both;
					}

					image {
						width: 24rpx;
						height: 24rpx;
						float: left;
						margin-right: 5rpx;

					}
				}

				text {
					float: right;
					font-size: 24rpx;
					color: #666;

					&.star {
						float: unset;
						font-size: 24rpx;
						color: #FCD100;
						flex: 1;
						margin-right: 8rpx;
					}
				}
			}
		}
	}
</style>
